<template>
  <!-- Header_style2、Header_style8、Header_style19、Header_style21_new -->
  <div class="tpl-whole" :class="type" :style="{'background-image':'url('+tplItemData.bg+')',height:docHeight+'px'}">
    <div class="con-box" v-if="tplItemData">
      <!-- 2号模板 -->
      <div class="homeCcon" v-if="tplItemData.title || tplItemData.subTitle">
        <a @click="openLink(tplItemData.titleLink.link)" class="title_link">
          <p :style="{color:tplItemData.titleColor}">{{tplItemData.title}} </p>
          <span :style="{color:tplItemData.subTitleColor}">{{tplItemData.subTitle}}</span>
        </a>
      </div>
      <div class="Header_style-nav" :class="type+'-nav'">
        <a @click="openLink(item.link)" v-for="(item,index) in tplItemData.dataset" :style="item.bgColor ? {'background-color':item.bgColor} : ''" :key="index">
          <img :src="item.pic" v-if="item.pic" >
          <template v-if="type == 'Header_style8'">
              <div class="subtitle">{{item.subtitle}}</div>
              <span>{{item.showtitle}}</span>
          </template>
          <template v-if="type == 'Header_style21_new'">
            <img src="https://img.wifenxiao.com/h5-wfx/images/diy/tpl21/21nav_bg.png"/>
            <b>{{item.subtitle}}</b>
            <span>{{item.showtitle}}</span>
          </template>
          <template v-else>
            <span class="title">{{item.showtitle}}</span>
            <span class="subtitle" v-if="item.subtitle">{{item.subtitle}}</span>
          </template>



        </a>
      </div>
    </div>
  </div>
  
</template>

<script>
import { openPage } from '@/utils/utils'
import Vue from 'vue'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    },
    type: {
      type: String
    }
  },
  data() {
    return {
      docHeight: 0
    }
  },
  created() {
    document.body.$$getBoundingClientRect().then(res => {
      this.docHeight = res.scrollHeight
    })
  },
  methods: {
    openLink(link){
      openPage(link)
    }
  }
})
</script>

<style lang="scss">
.tpl-whole{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: url("https://img.wifenxiao.com/h5-wfx/images/diy/tpl2/02bg.jpg") center center no-repeat;
  background-size: cover;
  &.Header_style19 {
    background: url("https://img.wifenxiao.com/h5-wfx/images/diy/tpl19/19bg.png") center center no-repeat;
    background-size: cover;
  }
  .homeCcon{
    width: 576px;
    height: 200px;
    padding:0px;
    margin:auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom:0;
    z-index: 10;
    text-align:center;
    background: url("https://img.wifenxiao.com/h5-wfx/images/diy/tpl2/02border.png")no-repeat;
    background-size: contain;
    color: #ff0000;
    .title_link{
      display:block;
      position:relative;
      width:100%;
      height:100%;
    }
    span{
      position: absolute;
      top: -18px;
      font-size: 30px;
      width: 70%;
      left: 50%;
      transform: translateX(-50%);
    }
    p{
      font-size: 40px;
      position: relative;
      font-weight: bold;
      margin: auto;
      top: 50%;
      bottom: 0;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      width: 90%;
    }
  }
  .Header_style-nav{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 24px;
    overflow: hidden;
    a{
      display: block;
      float: left;
      text-align:center;
      width: 20%;
      min-height: 84px;
      color: #FFF;
      margin-left: 4%;
      .title{
        display: block;
        font-size: 28px;
        overflow:hidden;
        margin-top: 24px;
        margin-bottom: 20px;
      }
      .subtitle{
        display: block;
        margin-bottom: 20px;
      }
    }
  }
  .Header_style19-nav{ 
    a {
      background: url("https://img.wifenxiao.com/h5-wfx/images/diy/tpl19/19nav01.png") no-repeat center center;
      background-size: 100% 100%;
    }
    .title {
      color:#7b5372;
    }
    
  }
  .Header_style8-nav{
    bottom: 0px;
    a {
      border-top-left-radius:20px;
      border-top-right-radius:20px;
      background-color: #fff;
    }
    img{
      display:block;
      margin: 20px auto 0;
      width: 64px;
      height: 64px;
    }
    .subtitle{
      color: #333;
      font-size: 22px;
      margin-top: 20px;
    }
    span{
      display: block;
      color: #ddbc54;
      font-size: 28px;
      line-height: 36px;
      margin: 30px auto;
      width: 80px;
    }
  }
  .Header_style2-nav{ 
    bottom: 0px;
    a {
      width: 25%;
      // height: 140px;
      padding-top: 20px;
      margin-left: 0%;
      background-color: rgba(255, 255, 255, 0.6);;
    }
    .title {
      color:#1a1a1a;
      font-size: 28px!important;
      margin-bottom: 40px!important;
    }
    img {
      display: block;
      position: relative;
      margin: auto;
      width: 40px;
      height: 40px;
    }
  }
  .Header_style21_new-nav {
    bottom: 36px;
    a{
	    width: 16%!important;
      margin-left: 7.5%!important;
      position: relative;
      img{
        width: 100%;
      }
      b{
        display: block;
        position: absolute;
        top: 40px;
        left: 30%;
        color: #636466;
        white-space: nowrap;
        font-size: 24px;
        font-weight: normal;
      }
      span{
        display: block;
        white-space: nowrap;
        position: absolute;
        left: 24%;
        top: 64px;
        color: #999999;
        font-size: 20px;
        line-height: 36px;
      }
    }
  }
}
</style>
